<template>
  <div>
    <template v-if="Array.isArray(item) && item.length > 0">
      <div v-for="(it, i) in item" :key="i" :class="valueType">
        <span v-if="spce && i > 0">{{ spce }}</span>
        <div
          v-for="(x, y) in props"
          :key="y"
          :style="'color:' + x.color + '; font-size:' + x.size"
          :class="[x.itemWrap ? 'wrap' : '', x.merge ? 'merge' : '']"
        >
          <label-text
            v-if="['string', 'number'].includes(typeof it[x.key]) || x.value"
            :link="x.link && Object.keys(x.link).length > 0 ? x.link : link"
            :value="x.value"
            :empty-text="x.emptyText"
            :prop="x.key"
            :item="{ ...it, callback: x.callback }"
            :type="type"
            :unit="unit"
          ></label-text>
          <label-item
            v-else
            :props="x.props"
            :item="it[x.key]"
            :type="type"
            :unit="unit"
            :link="link"
            :spce="x.spce"
            :value-type="x.valueType"
          ></label-item>
        </div>
      </div>
    </template>
    <template v-else-if="item && Object.keys(item).length > 0">
      <div :class="valueType">
        <div
          v-for="(x, y) in props"
          :key="y"
          :style="'color:' + x.color + '; font-size:' + x.size"
          :class="[x.itemWrap ? 'wrap' : '', x.merge ? 'merge' : '']"
        >
          <label-text
            v-if="['string', 'number'].includes(typeof item[x.key]) || x.value"
            :link="x.link && Object.keys(x.link).length > 0 ? x.link : link"
            :value="x.value"
            :empty-text="x.emptyText"
            :prop="x.key"
            :item="{ ...item, callback: x.callback }"
            :type="type"
            :unit="unit"
          ></label-text>
          <label-item
            v-else
            :props="x.props"
            :item="item[x.key]"
            :type="type"
            :unit="unit"
            :link="link"
            :spce="x.spce"
            :value-type="x.valueType"
          ></label-item>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import LabelText from '@/components/DescInfoListItem/label';
export default {
  name: 'LabelItem',
  components: {
    LabelText,
  },
  props: {
    props: { type: Array, default: () => [] },
    item: { type: [Array, String, Object, Number], default: () => {} },
    link: { type: Object, default: () => {} },
    unit: { type: String, default: '' },
    type: { type: String, default: 'text' },
    valueType: { type: String, default: 'text' },
    spce: { type: String, default: '' },
  },
};
</script>
<style lang="scss" scoped>
.col-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 20px;
  flex-wrap: wrap;
  .wrap {
    width: 100%;
  }
}
.list {
  margin-bottom: 5px;
  line-height: 20px;
}
.merge {
  > div {
    display: flex;
    justify-content: flex-start;
    .col-list {
    }
  }
}
</style>
